<script setup lang="ts">
const state = reactive({
  // 销售价格
  salePrice: undefined,
  // 人群溢价
  crowdPremium: undefined,
  // 抢位溢价
  bidPremium: undefined,
  // 智能溢价
  intelligentPremium: undefined,
  // 分时折扣
  timeDiscount: undefined,
});
// 最终出价
const bidPriceValue = computed(() => {
  const {salePrice, crowdPremium, bidPremium, intelligentPremium, timeDiscount} = state;
  if (salePrice) {
    // 最终出价 = 销售价格 * (1 + 人群溢价/100) * (1 + 抢位溢价/100) * (1 + 智能溢价/100) * (1 - 分时折扣/100) 如果有undefined，就不计算
    const result = salePrice * (1 + (crowdPremium || 0) / 100) * (1 + (bidPremium || 0) / 100) * (1 + (intelligentPremium || 0) / 100);
    if (timeDiscount) {
      return (result * (timeDiscount || 0) / 100).toFixed(2);
    }
    return result.toFixed(2);
  }
  return 0;
});
</script>

<template>
  <a-card :body-style="{
  padding:'10px',
}"
  >
    <div class="title">

      <a-col flex="1">
        <a-card style="height: 100%;" :style="{
      width: '300px',
      margin: '0 auto',
        }" :body-style="{
      padding:'10px',
      height: 'calc(100% - 42px)',
      }"
        >
          <div class="title">
            关键词出价计算
          </div>
          <div class="items">

            <a-input v-model:value="state.salePrice" placeholder="必填" size="small" addon-before="销售价格"
                     addon-after="元" allow-clear
            />
            <a-input-number v-model:value="state.crowdPremium" placeholder="5-300" min="5" max="300" size="small"
                            addon-before="人群溢价"
                            addon-after="%" allow-clear
            />
            <a-input-number v-model:value="state.bidPremium" placeholder="1-200" size="small" min="1" max="200"
                            addon-before="抢位溢价" addon-after="%"
            />
            <a-input-number v-model:value="state.intelligentPremium" placeholder="必填" size="small" min="30" max="300"
                            addon-before="智能溢价"
                            addon-after="%"
            />
            <a-input-number v-model:value="state.timeDiscount" placeholder="必填" size="small" addon-before="分时折扣"
                            min="30" max="250" addon-after="%"
            />
          </div>

          <template #actions>
            <div class="footer">
              <div>最终出价</div>
              <div class="value">{{ bidPriceValue }}</div>
              <div>元</div>
            </div>
          </template>
        </a-card>
      </a-col>
    </div>
  </a-card>
</template>

<style scoped>
.title {
  font-size: 16px;
  color: #222;
  padding-bottom: 10px;
}

.footer {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #f5f7fa;
  font-size: 12px;
  margin: -12px 0;
  color: #444;

  .value {
    width: 80px;
    text-align: center;
    background-color: #fff;
    font-size: 14px;
    color: #1677ff;
  }
}

.items {
  padding: 10px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>
